/** @author: duanhaijiao  @date 2022/7/6--9:48 **/

/* name: "childView" */
<template>
    <div class="childView">
        <Breadcrumb :lineList="lineList"></Breadcrumb>
        <div class="second-con flex flex-space-between">
            <sliderTabBar :title="title" :nav-list="navList" :checkedId="checkedId" @sliderSelect="sliderSelect"></sliderTabBar>
            <div class="page-con">
                <infoConTop :title="title"></infoConTop>
                <transition>
                    <router-view v-if="pageId" :pageId="pageId"></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import Breadcrumb from '@/views/components/Breadcrumb.vue'
    import sliderTabBar from '@/views/components/sliderTabBar.vue'
    import infoConTop from '@/views/components/infoConTop.vue'
    import {home} from '@/assets/api/api'

    export default {
        name: "childView",
        components: {
            Breadcrumb,
            sliderTabBar,
            infoConTop
        },
        data() {
            return {
                pageId: '',
                title: '通知公告',
                lineList: [
                    {path: '/', title: '首页'},
                ],
                checkedId:'',
                navList: [],
                informList: []
            }
        },
        mounted() {
            this.getSecondNav(this.$route.params.id)
        },
        watch: {
            $route(to, from) {
                this.pageId = ''
                this.getSecondNav(this.$route.params.id)
            },
        },
        updated() {

        },
        methods: {
            getSecondNav(id) {
                this.checkedId = this.$route.query ? this.$route.query.secId : ''
               
                if (id === '0') {
                    this.lineList = [
                        {path: '/', title: '首页'},
                        {title: '通讯手册'}
                    ];
                    this.title = '通讯手册';
                    this.navList = [{
                        name: '通讯手册'
                    }];
                    this.pageId = ''
                    this.$nextTick(() => {
                        this.pageId = 999
                    })
                     this.sliderSelect(this.navList.filter((n)=>{return n.id == this.checkedId})[0])
                    return;
                } else if (this.$route.name == 'mydetail') {
                    this.lineList = [
                        {path: '/', title: '首页'},
                        {title: '单位简介'}
                    ];
                    this.title = '单位简介';
                    this.navList = [{
                        name: '单位简介',
                    }];
                    this.pageId = ''
                    this.$nextTick(() => {
                        this.pageId = 999
                    })
                    this.sliderSelect(this.navList.filter((n)=>{return n.id == this.checkedId})[0])
                    return;
                } else {
                    if (!id) return;
                    this.lineList = [
                        {path: '/', title: '首页'},
                    ];
                    this.$http(home.cateall, {
                        catepid: id
                    }).then((res) => {
                        this.navList = res.data;
                        this.title = res.newdata.name;
                        this.lineList.push({
                            title: this.title
                        })
                        this.pageId = ''
                        this.$nextTick(() => {
                            this.pageId = res.data[0] ? res.data[0]['id'] : '';
                        })
                        this.sliderSelect(this.navList.filter((n)=>{return n.id == this.checkedId})[0])

                    })
                }
               
            },
            sliderSelect(data) {                
                if (data.name == '单位简介' || data.name == '通讯手册') return;
                this.$nextTick(() => {
                    this.pageId = data.id;
                })
            }
        }
    };
</script>

<style lang="scss">
    .childView {
        .second-con {
            padding: 20px;

            .page-con {
                width: calc(100% - 200px);

                .inform-con-list {
                    padding: 20px; 

                    .inform-con-item {
                        padding: 10px 0;

                        .inform-con-item-title-tip {
                            width: 3px;
                            height: 3px;
                            margin-right: 10px;
                            border-radius: 50%;
                            background: #999;
                        }

                        .inform-con-item-time {
                            color: #ccc;
                        }
                    }
                }
            }
        }
    }

</style>
